```html
<script setup lang="ts">
  import * as listbox from "@zag-js/listbox"
  import { useMachine, normalizeProps } from "@zag-js/vue"
  import { computed, useId } from "vue"

  const data = [
    { label: "Nigeria", value: "NG" },
    { label: "United States", value: "US" },
    { label: "Canada", value: "CA" },
    { label: "Japan", value: "JP" },
  ]

  const collection = listbox.collection({ items: data })

  const service = useMachine(listbox.machine, {
    id: useId(),
    collection,
  })

  const api = computed(() => listbox.connect(service, normalizeProps))
</script>

<template>
  <div v-bind="api.getRootProps()">
    <label v-bind="api.getLabelProps()">Select country</label>
    <ul v-bind="api.getContentProps()">
      <li
        v-for="item in data"
        :key="item.value"
        v-bind="api.getItemProps({ item })"
      >
        <span v-bind="api.getItemTextProps({ item })">{{ item.label }}</span>
        <span v-bind="api.getItemIndicatorProps({ item })">✓</span>
      </li>
    </ul>
  </div>
</template>
```
